<template>
    <div class="china_telecom_api_accounts">
        <router-view></router-view>
        <el-row>
            <el-col :md="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="运营商账户搜索：" class="mt_5">
                        <el-input v-model="formInline.user" placeholder="接口用户名"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit">
                        <i class="el-icon-search"></i>
                    </el-button>
                    <el-button type="primary" @click="getCarrierData">
                        <i class="el-icon-refresh"></i>
                    </el-button>
                </el-form>
            </el-col>
            <el-col :md="4" class="float-right">
                <router-link :to="'/carrier/' + apiId +'/china_telecom_api_accounts/new'">
                    <el-button type="primary">新增</el-button>
                </router-link>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="name" label="名称" width="200">
        </el-table-column>
        <el-table-column prop="apiname" label="接口用户名" width="100">
        </el-table-column>
        <el-table-column prop="apipassword" label="接口密码" width="100">
        </el-table-column>
        <el-table-column prop="apissh" label="接口密钥" width="100">
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="160">
        </el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="160">
        </el-table-column>
        <el-table-column prop="note" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="methods" label="操作">
            <template slot-scope="scope">
            <router-link size="mini" tag="button" :to="'/carrier/' + apiId +'/china_telecom_api_accounts/edit'" class="el-button el-button--default el-button--mini">
                编辑
            </router-link>
            <el-button size="mini" type="danger" @click="deleteSingData(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                formInline: {
                    user: '',
                    carrierSearch: ''
                },
                tableData: [],
                tableData1: []
            }
        },
        computed: {
            apiId() {
                return this.$store.getters.carrier.carrierId
            }
        },
        mounted() {
            this.getCarrierData()
        },
        methods: {
            onSubmit() {
                if (this.formInline.user) {
                    this.tableData = this.tableData1
                    this.newTableData = this.tableData.filter((res) => {
                        console.log(res['apiname'] == this.formInline.user)
                        return res['apiname'].includes(this.formInline.user)
                })
                } else {
                    this.newTableData = this.tableData1
                }
                this.tableData = this.newTableData
            },
            deleteSingData(goods) {
                this.tableData = this.tableData1 = this.tableData.filter((res) => {
                return res.apiId != goods.apiId
                })
            },
            select(index, row) {
                console.log(index, row)
            },
            getCarrierData() {
                this.$axios.get('/api/api_accounts').then((res) => {
                if (res.data.errno === 0) {
                    this.tableData = this.tableData1 = res.data.data.apiData
                }
                })
                this.formInline.user = ''
            }
        }
    }
</script>

<style scoped lang="scss">
</style>